<script setup>
const list = [{
	title: "预约管理",
	array: [
		{ name: '入库', icon: '📥', color: '#409EFF', bg: 'rgba(64, 158, 255, 0.08)', url: '/pages/reservation/inplan/index' },
		{ name: '出库', icon: '📤', color: '#67C23A', bg: 'rgba(103, 194, 58, 0.08)', url: '/pages/reservation/outplan/index' }
	]
}, {
	title: "订单管理",
	array: [
		{ name: '入库', icon: '📦', color: '#409EFF', bg: 'rgba(64, 158, 255, 0.08)', url: "/pages/orderManagement/order?type=inorder" },
		{ name: '出库', icon: '🚚', color: '#67C23A', bg: 'rgba(103, 194, 58, 0.08)', url: "/pages/orderManagement/order?type=outorder" }
	]
}, {
	title: "货物管理",
	array: [
		{ name: '入库', icon: '🏢', color: '#E6A23C', bg: 'rgba(230, 162, 60, 0.08)', url: '/pages/goods/index?type=in' },
		{ name: '出库', icon: '📦', color: '#F56C6C', bg: 'rgba(245, 108, 108, 0.08)', url: "/pages/goods/index?type=out" }
	]
}, {
	title: "基础信息",
	array: [
		{ name: '车辆', icon: '🚛', color: '#E6A23C', bg: 'rgba(230, 162, 60, 0.08)', url: '/pages/car/index' },
		{}
	]
}]

const handleItemClick = (item) => {
	if (!item?.url) return uni.$u.toast("未开发")
	uni.navigateTo({ url: item.url })
}
</script>

<template>
	<view class="container">
		<view class="worktable" v-for="(val, ind) in list" :key="ind">
			<view class="content">
				<view class="header">
					<view class="title">
						{{ val.title }}
						<view class="title-line"></view>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item, index) in val.array" :key="index"
						:style="{ '--item-color': item.color, '--item-bg': item.bg }" @click="handleItemClick(item)">
						<view class="item-icon">
							{{ item.icon }}
						</view>
						<view class="item-name">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.worktable {
	width: 100%;
	margin-bottom: 20rpx;
	/* 增加4rpx */

	.content {
		width: 100%;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

		.header {
			margin-bottom: 14rpx;
			position: relative;

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: $list-color;
				padding-left: 8rpx;
				position: relative;
				display: inline-block;
			}

			.title-line {
				position: absolute;
				left: 0;
				bottom: 2rpx;
				width: 100%;
				height: 6rpx;
				background: linear-gradient(90deg, var(--item-color), transparent);
				opacity: 0.3;
				border-radius: 3rpx;
			}
		}

		.list {
			display: flex;
			justify-content: space-between;
			gap: 14rpx;

			.item {
				flex: 1;
				height: 110rpx;
				/* 增加20rpx */
				background: var(--item-bg);
				border-radius: 8rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				transition: all 0.2s;
				position: relative;
				overflow: hidden;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 2rpx;
					background: var(--item-color);
				}

				.item-icon {
					font-size: 36rpx;
					/* 增加4rpx */
					margin-bottom: 8rpx;
					color: var(--item-color);
					transition: all 0.2s;
				}

				.item-name {
					font-size: $list-font-size;
					color: $list-color;
					font-weight: 400;
				}
			}
		}
	}
}
</style>